<template>
  <div class="container">
    <el-input
      v-if="item1.item_type == 'input'"
      v-model="item1.value"
      :placeholder="item1.pl"
      :disabled="item1.disabled"
      show-word-limit
      :maxlength="item1.max_length"
    >
    </el-input>

    <el-input-number
      v-if="item1.item_type == 'input_number'"
      v-model="item1.value"
      :placeholder="item1.pl"
      :disabled="item1.disabled"
      :precision="item1.precision"
      :max="item1.max"
      :min="item1.min"
    >
    </el-input-number>
    <el-input
      type="textarea"
      style="width: 100%"
      v-if="item1.item_type == 'textarea'"
      resize="none"
      :autosize="{ minRows: 2, maxRows: 4 }"
      v-model="item1.value"
      :placeholder="item1.pl"
      :disabled="item1.disabled"
      show-word-limit
      :maxlength="item1.max_length"
    >
    </el-input>
    <el-select
      clearable
      v-if="item1.item_type == 'select' && !item1.multiple"
      v-model="item1.value"
      :placeholder="item1.pl"
      :disabled="item1.disabled"
      @change="EventBus.emit('change_selector')"
    >
      <el-option
        v-for="item2 in item1.data"
        :value="item2.value"
        :label="item2.label"
        :disabled="item2.disabled"
      ></el-option>
    </el-select>
    <el-select
      clearable
      v-if="item1.item_type == 'select' && item1.multiple"
      multiple
      v-model="item1.value"
      :placeholder="item1.pl"
      :disabled="item1.disabled"
      @change="EventBus.emit('change_selector')"
    >
      <el-option
        v-for="item2 in item1.data"
        :value="item2.value"
        :label="item2.label"
        :disabled="item2.disabled"
      ></el-option>
    </el-select>
    <el-radio-group
      v-if="item1.item_type == 'radio'"
      v-model="item1.value"
      :disabled="item1.disabled"
      @change="EventBus.emit('change_selector')"
    >
      <el-radio
        v-for="item2 in item1.data"
        :label="item2.value"
        :disabled="item2.disabled"
        >{{ item2.label }}</el-radio
      >
    </el-radio-group>
    <el-checkbox-group
      v-if="item1.item_type == 'checkBox'"
      v-model="item1.value"
      :disabled="item1.disabled"
      @change="EventBus.emit('change_selector')"
    >
      <el-checkbox
        v-for="item2 in item1.data"
        :label="item2.value"
        :disabled="item2.disabled"
        >{{ item2.label }}</el-checkbox
      >
    </el-checkbox-group>
    <div class="flex" v-if="item1.item_type == 'time'">
      <el-time-select
        :disabled="item1.disabled"
        v-model="item1.startTime"
        :max-time="item1.endTime"
        style="width: 150px"
        :placeholder="item1.is_time_between ? '开始时间' : '请选择'"
        start="00:00"
        :step="item1.step"
        end="24:00"
      />
      <span v-if="item1.is_time_between" class="m_0_5">-</span>
      <el-time-select
        :disabled="item1.disabled"
        v-if="item1.is_time_between"
        v-model="item1.endTime"
        :min-time="item1.startTime"
        style="width: 150px"
        placeholder="结束时间"
        start="00:00"
        :step="item1.step"
        end="24:00"
      />
    </div>
    <el-date-picker
      v-if="item1.item_type == 'date'"
      v-model="item1.value"
      :type="item1.date_type"
      unlink-panels
      range-separator="-"
      placeholder="请选择"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :disabled="item1.disabled"
      value-format="x"
    />
    <el-cascader
      clearable
      v-if="item1.item_type == 'tree'"
      v-model="item1.value"
      :options="item1.data"
      :props="item1.props"
      :disabled="item1.disabled"
      @change="EventBus.emit('change_selector')"
    />
    <el-switch
      v-if="item1.item_type == 'switch'"
      v-model="item1.value"
      inline-prompt
      active-text="开启"
      inactive-text="关闭"
      :disabled="item1.disabled"
      @change="EventBus.emit('change_selector')"
    />
    <upload
      v-if="item1.item_type == 'upload'"
      :imageUrl="item1.value"
      :width="item1.width"
      :height="item1.height"
      :limit="item1.limit"
      :uploadUrl="item1.uploadUrl"
      :downloadUrl="item1.downloadUrl"
      :accept="item1.accept"
      @change="EventBus.emit('change_selector')"
    ></upload>
  </div>
</template>

<script lang="ts" setup>
import { toRefs } from 'vue'
import upload from '@/view/components/upload.vue'
import EventBus from '@/utils/EventBus'
const props = defineProps({
  item1: Array,
  selector_type: String, // main   right  condition  主页 权限 条件
})

const { item1, selector_type } = toRefs<any>(props)
console.log(selector_type.value)
if (selector_type.value == 'right' && !item1.value.is_right) {
  item1.value = ''
}
if (selector_type.value == 'condition' && !item1.value.is_condition) {
  item1.value = ''
}
</script>

<style lang="scss" scoped></style>
